<template>
  <div id="sidebar">
    <h3>{{ $t('menu.lock') }}</h3>
    <a-menu
      style="width: 200px"
      :selectedKeys="selectedKeys"
      :mode="mode"
      :theme="theme"
    >

      <a-menu-item key="/lock/list/content" style="padding-left:48px;">
        <router-link :to="{ name: 'LockContent' }">
          <a-icon :component="iconDoorS" class="font12" v-show="sideStatus === '/lock/list/content'"/>
          <a-icon :component="iconDoorN" class="font12" v-show="sideStatus === '/lock/list/history'"/>
          {{ $t('menu.LockContent') }}
        </router-link>
      </a-menu-item>
      <!-- 暂时隐藏 -->
      <!-- <a-menu-item key="/lock/list/history" style="padding-left:48px;">
        <router-link :to="{ name: 'LockHistory' }">
          <a-icon :component="iconOpenS" class="font12" v-show="sideStatus === '/lock/list/history'"/>
          <a-icon :component="iconOpenN" class="font12" v-show="sideStatus === '/lock/list/content'"/>
          {{ $t('menu.LockHistory') }}
        </router-link>
      </a-menu-item> -->
    </a-menu>
  </div>
</template>
<script>
import { iconDoorN, iconDoorS, iconOpenN, iconOpenS } from '@/core/icons'
export default {
  name: 'LockSide',
  data () {
    return {
      mode: 'inline',
      theme: 'light',
      iconDoorS,
      iconDoorN,
      iconOpenN,
      iconOpenS,
      sideStatus: '/lock/list/content', // 菜单栏图标样式
      selectedKeys: []
    }
  },
  methods: {
    updateMenu () {
      const routes = this.$route.matched.concat()
      const selRout = routes.pop().path
      this.selectedKeys = [ selRout ]
      this.sideStatus = selRout
    }
  },
  created () {
    this.updateMenu()
  },
  watch: {
    '$route' (val) {
      this.updateMenu()
    }
  }
}
</script>
<style lang="less" scoped>
#sidebar{
  width:200px;
  background-color: #fff;
  position: absolute;
  top:64px;
  left:0;
  bottom:0;
  z-index: 2;
  h3{
    font-size: 16px;
    padding-left:27px;
    padding-top:12px;
  }
}
</style>
